<template>
  <div>
      <h4>学生信息一览</h4>
      <table border="1" cellspacing="0" width="600">
          <thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>成绩</th><th>操作</th></tr></thead>

          <tbody>
            <tr v-for="(s,index) in cutBean.list" :key="s.id">
              <td>{{s.id}}</td>
               <td>{{s.name}}</td>
                <td>{{s.sex}}</td>
                 <td>{{s.grade}}</td>
                 <td><a href="javascript:void(0)" @click="find(s)">修改</a>
                  <a style="margin-left:10px" href="javascript:void(0)" @click="del(index)">删除</a></td>
            </tr> 
          </tbody>
      </table>
      <a  v-for=" n in cutBean.pages" :key="n" style="margin-left:10px" 
       href="javascript:void(0)" @click="pageClick(n)"  >{{n}}</a>
  </div>
</template>

<script>
export default {
     props:["cutBean","stuObj"],
     methods:{
       pageClick(pageNO){
          // this.$emit("speak",pageNO);
         this.$emit("showStudent",pageNO);//调用父组件里的showStudent方法，把pageNO传过去
       },
       find(stu){
          this.$emit("find",stu);
       },
       del(index){
          this.cutBean.list.splice(index,1);
       }
     }
}
</script>

<style>

</style>